<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>集群测试页面</title>
    <link rel="stylesheet" href="./layui/css/layui.css" />
    <style>
      .box1 {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="box1" style="height: 100px; background-color: #16baaa">
      hello,world,==========node1============
    </div>
    <!-- 设置redis测试 -->
    <div style="height: 200px" class="layui-row">
      <div class="layui-col-xs6" style="height: 100%">
        <div class="layui-card" style="height: 100%; background-color: #16b777">
          <div class="layui-card-header">
            <h3>设置redis</h3>
          </div>
          <div class="layui-card-body">
            <form class="layui-form">
              <div class="layui-form-item">
                <label class="layui-form-label">key</label>
                <div class="layui-input-block">
                  <input
                    type="text"
                    name="key"
                    lay-verify="required"
                    placeholder="请输入"
                    autocomplete="off"
                    class="layui-input"
                  />
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">value</label>
                <div class="layui-input-block">
                  <input
                    type="text"
                    name="value"
                    lay-verify="required"
                    placeholder="请输入"
                    autocomplete="off"
                    class="layui-input"
                  />
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button
                    type="submit"
                    class="layui-btn"
                    lay-submit
                    lay-filter="demo1"
                  >
                    立即提交
                  </button>
                  <button type="reset1" class="layui-btn layui-btn-primary">
                    重置
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div
        class="layui-col-xs6"
        style="height: 100%; background-color: seagreen"
      >
        <div class="layui-panel" style="height: 100%; overflow: auto">
          <textarea id="result1" style="height: 100%" class="layui-textarea">
          </textarea>
        </div>
      </div>
    </div>
    <!-- 获取redis测试 -->
    <div style="height: 200px" class="layui-row">
      <div class="layui-col-xs6" style="height: 100%">
        <div class="layui-card" style="height: 100%; background-color: #1e9fff">
          <div class="layui-card-header">
            <h3>设置redis</h3>
          </div>
          <div class="layui-card-body">
            <form class="layui-form">
              <div class="layui-form-item">
                <label class="layui-form-label">key</label>
                <div class="layui-input-block">
                  <input
                    type="text"
                    name="key"
                    lay-verify="required"
                    placeholder="请输入"
                    autocomplete="off"
                    class="layui-input"
                  />
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button
                    type="submit"
                    class="layui-btn"
                    lay-submit
                    lay-filter="demo2"
                  >
                    立即提交
                  </button>
                  <button type="reset" class="layui-btn layui-btn-primary">
                    重置
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div
        class="layui-col-xs6"
        style="height: 100%; background-color: seagreen"
      >
        <div class="layui-panel" style="height: 100%; overflow: auto">
          <textarea id="result2" style="height: 100%" class="layui-textarea">
          </textarea>
        </div>
      </div>
    </div>
  </body>
  <script src="./jquery.min.js"></script>
  <script src="./layui/layui.js"></script>
  <script>
    layui.use(["form", "laydate", "util"], function () {
      var form = layui.form;
      var layer = layui.layer;

      var baseUrl = "/server";
      // setRedis
      form.on("submit(demo1)", function (data) {
        console.log("data", data.field);
        $.ajax({
          url: baseUrl + "/setRedis",
          type: "GET",
          data: data.field,
          dataType: "json",
          success: function (res) {
            console.log("res", res);
            $("#result1").val(JSON.stringify(res, null, "\t"));
          },
          error: function (e) {
            console.log("操作失败", e);
            layer.msg("操作失败!");
          },
        });
        return false; // 阻止默认 form 跳转
      });

      // getRedis
      form.on("submit(demo2)", function (data) {
        console.log("data", data.field);
        $.ajax({
          url: baseUrl + "/getRedis",
          type: "GET",
          data: data.field,
          dataType: "json",
          success: function (res) {
            console.log("res", res);
            $("#result2").val(JSON.stringify(res, null, "\t"));
          },
          error: function (e) {
            console.log("操作失败", e);
            layer.msg("操作失败!");
          },
        });
        return false; // 阻止默认 form 跳转
      });
    });
  </script>
</html>
